<template>
	<view class="agentApplication bigestBox">
		<view class="avatar">
			<!--<image :src="'/static/images/AgentApplication/AgentAvatar.png'" mode="" class="avatarImg"></image>-->
			<image src="qrCodeData" mode="" class="avatarImg"></image>
		</view>
		<view class="lishang">{{ userInfo.nickname }}</view>
		<view class="number">{{ userInfo.id }}</view>
		<view class="text">申请代理后，可通过分享客房、商品给其它用户，而获得分佣提成。</view>
		<view class="task">任务列表</view>
		<view class="taskList boxSize_bb flexDeCo">
			<view class="tl_item flex_jcsb boxSize_bb">
				<div class="tl_left flex">
					<image src="/static/images/AgentApplication/shareCustomerHouse.png" mode=""></image>
					<view class="tl_Text">
						<view class="tlt_top">分享客房到微信朋友圈</view>
						<view class="tlt_bottom">分享任意客房到微信朋友圈</view>
					</view>
				</div>
				<completed-button v-if="isRoomShared"></completed-button>
				<complete-button v-else @tap="navTo('/pages/HotelRoomListPage/HotelRoomListPage')"></complete-button>
			</view>
			<view class="tl_item flex_jcsb boxSize_bb">
				<div class="tl_left flex">
					<image src="/static/images/AgentApplication/shareProduct.png" mode=""></image>
					<view class="tl_Text">
						<view class="tlt_top">分享商品到微信朋友圈</view>
						<view class="tlt_bottom">分享任意商品到微信朋友圈</view>
					</view>
				</div>
				<completed-button v-if="isProductShared"></completed-button>
				<complete-button v-else @tap="navTo('/pages/ShoppingList/index')"></complete-button>
			</view>
			<view class="tl_item flex_jcsb boxSize_bb">
				<div class="tl_left flex">
					<image src="/static/images/AgentApplication/purchase.png" mode=""></image>
					<view class="tl_Text">
						<view class="tlt_top">购买商品</view>
						<view class="tlt_bottom">购买任意商品</view>
					</view>
				</div>
				<completed-button v-if="isBuyProduct"></completed-button>
				<complete-button v-else @tap="navTo('/pages/ShoppingList/index')"></complete-button>
			</view>
		</view>
		<button
			class="application button"
			:class="{ disabled: buttonDisabled }"
			@tap="handleApply"
		>
			{{ buttonText }}
		</button>
	</view>
</template>

<script>
	import CompleteButton from '../../components/AgentApplication/CompleteButton.vue';
	import CompletedButton from '../../components/AgentApplication/CompletedButton.vue';
	import { getAgentInfo, applyAgent, getQrcode } from '../../api/commission';
	import { mapState } from 'vuex';

	export default {
		data() {
			return {
				// 是否分享客房
				isRoomShared: false,
				// 是否分享商品
				isProductShared: false,
				// 是否购买商品
				isBuyProduct: false,
				// 代理状态 0:未申请 1:审核中 2:已通过 3:已拒绝
				agentStatus: 0,
				qrCodeData: ''
			};
		},
		computed: {
			...mapState(['userInfo']),
			buttonText() {
				let text = '';
				switch(Number(this.agentStatus)) {
					case 1:
						text = '已提交代理申请，等待审核...';
						break;
					case 2:
						text = '已成为代理';
						break;
					default:
						text = '提交申请';
						break;
				}
				console.log('按钮文字:', text);
				return text;
			},
			buttonDisabled() {
				return this.agentStatus === 1 || this.agentStatus === 2;
			}
		},
		components: {
			CompleteButton,
			CompletedButton
		},
		onShow() {
			// 页面显示时获取代理信息
			this.getAgentTaskStatus();
			this.showQrcode();
		},
		methods: {
			// 获取代理任务状态
			async getAgentTaskStatus() {
				try {
					const res = await getAgentInfo();
					if (res && res.code === 200 && res.data) {
						this.isRoomShared = res.data.isRoomShared || false;
						this.isProductShared = res.data.isProductShared || false;
						this.isBuyProduct = res.data.isBuyProduct || false;
						this.agentStatus = res.data.status || 0;
						this.id = res.data.id || {};
					}
				} catch (err) {
					console.error('获取代理信息失败:', err);
					uni.showToast({
						title: '获取代理信息失败',
						icon: 'none'
					});
				}
			},
			async showQrcode() {
				try {
					const res = await getQrcode();
					if (res && res.code === 200) {
						this.qrCodeData = "data:image/png;base64," + res.data
						console.log(this.qrCodeData)
					}
				} catch (err) {
					console.error('获取二维码失败:', err);
					uni.showToast({
						title: '获取二维码失败',
						icon: 'none'
					});
				}
			},
			async handleApply() {
				if (this.buttonDisabled) return;

				try {
					const res = await applyAgent(this.id);
					if (res && res.code === 200) {
						uni.showToast({
							title: '申请提交成功',
							icon: 'success'
						});
						// 重新获取状态
						this.getAgentTaskStatus();
					} else {
						uni.showToast({
							title: res.message || '申请提交失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('申请代理失败:', err);
					uni.showToast({
						title: '申请代理失败',
						icon: 'none'
					});
				}
			},
			goToMembershipPage() {
				uni.navigateTo({
					url: '/pages/MembershipCodePage/MembershipCodePage'
				});
			},
			navTo(url) {
				if(url === '/pages/ShoppingList/index') {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";


	.agentApplication {
		font-family: 'PingFang SC';
		font-weight: 400;
		letter-spacing: 0px;
		color: #222222;
		font-size: 28rpx;

		.avatar {
			display: flex;
			justify-content: center;

			.avatarImg {
				width: 200rpx;
				height: 200rpx;
				margin-top: 40rpx;
			}
		}

		.lishang {
			font-size: 28rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.number {
			margin-top: 20rpx;
			font-weight: bold;
			font-size: 34rpx;
			text-align: center;
		}

		.text {
			width: 606rpx;
			font-size: 26rpx;
			color: #979797;
			margin: 26rpx auto 0 auto;
		}

		.task {
			color: #000000;
			margin-left: 30rpx;
			margin-top: 30rpx;
		}

		.taskList {
			padding: 30rpx;
			padding-bottom: 0;

			.tl_item {
				align-items: center;
				background: #FFFFFF;
				margin-top: 20rpx;
				padding: 30rpx;

				.tl_left {


					image {
						width: 64rpx;
						height: 64rpx;

					}

					.tl_Text {
						margin-left: 20rpx !important;

						.tlt_top {}

						.tlt_bottom {
							margin-top: 10rpx;
							font-size: 22rpx;
							color: #00000059;
						}
					}

				}

			}
		}

		.application {
			width: 670rpx;
			height: 88rpx;
			margin: 60rpx auto 0 auto;
			font-weight: 400;
			font-size: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border: none;
			border-radius: 8rpx;

			&::after {
				border: none;
			}

			.button-text {
				color: inherit;
				font-size: inherit;
				font-weight: inherit;
			}

			&.disabled {
				background: #cccccc;
				color: #000000;
			}
		}
	}
</style>